آموزش دستکاری DOM با جاوا اسکریپت مدرن آسان [ویدئو]

سرفصل ها و درس ها

خوش آمدی Welcome

• DOM چیست؟ What is the DOM?

• DOM چیست؟ What is the DOM?

• اولین به روز رسانی DOM شما Your First DOM Update

• اولین به روز رسانی DOM شما Your First DOM Update

• پروژه دوره: کد DOM Adventure Course Project: Code DOM Adventure

• پروژه دوره: کد DOM Adventure Course Project: Code DOM Adventure

اصول DOM DOM Fundamentals

• HTML و DOM HTML and the DOM

• HTML و DOM HTML and the DOM

• استانداردهای DOM DOM Standards

• استانداردهای DOM DOM Standards

• BOM The BOM

• BOM The BOM

• CSSOM The CSSOM

• CSSOM The CSSOM

• درخت (ساختار داده) The Tree (Data Structure)

• درخت (ساختار داده) The Tree (Data Structure)

• درخت DOM The DOM Tree

• درخت DOM The DOM Tree

• DOM و جاوا اسکریپت The DOM and JavaScript

• DOM و جاوا اسکریپت The DOM and JavaScript

اصول DOM DOM Fundamentals

کد DOM Adventure Code DOM Adventure

• معماری اپلیکیشن App Architecture

• معماری اپلیکیشن App Architecture

• راه حل چالش: صفحه خروجی Challenge Solution: The Exit Screen

• راه حل چالش: صفحه خروجی Challenge Solution: The Exit Screen

• اسکلت برنامه App Skeleton

• اسکلت برنامه App Skeleton

• فایل Splash Screen The Splash Screen File

• فایل Splash Screen The Splash Screen File

• از جمله دارایی ها Including the Assets

• از جمله دارایی ها Including the Assets

کد DOM Adventure Code DOM Adventure

ایجاد عناصر Creating Elements

• سیم کشی عنصر Splash Screen Wiring the Splash Screen Element

• سیم کشی عنصر Splash Screen Wiring the Splash Screen Element

• ایجاد عناصر در زمان اجرا Creating Elements at Runtime

• ایجاد عناصر در زمان اجرا Creating Elements at Runtime

• افزودن عرض رشته های HTML Append() Appending HTML Strings Width Append()

• افزودن عرض رشته های HTML Append() Appending HTML Strings Width Append()

• اضافه کردن گره ها با Append یا AppendChild Appending Nodes with Append or AppendChild

• اضافه کردن گره ها با Append یا AppendChild Appending Nodes with Append or AppendChild

• ترتیب اسکریپت مهم است Script Order Matters

• ترتیب اسکریپت مهم است Script Order Matters

ایجاد عناصر Creating Elements

CSS پویا Dynamic CSS

• تعیین کلاس ها به عناصر Specifying Classes to Elements

• تعیین کلاس ها به عناصر Specifying Classes to Elements

• کار با استاتیک استایل Working with Static Styles

• کار با استاتیک استایل Working with Static Styles

• تعریف سبک ها در زمان اجرا Defining Styles at Runtime

• تعریف سبک ها در زمان اجرا Defining Styles at Runtime

• پرس و جو از DOM برای یافتن عناصر Querying the DOM to Find Elements

• پرس و جو از DOM برای یافتن عناصر Querying the DOM to Find Elements

CSS پویا Dynamic CSS

پروفایل Pixel Pipeline Profiling the Pixel Pipeline

• خط لوله پیکسل The Pixel Pipeline

• خط لوله پیکسل The Pixel Pipeline

• شناسایی شیوه های بد Identifying Bad Practices

• شناسایی شیوه های بد Identifying Bad Practices

• پروفایل کردن عملکرد زمان اجرا Profiling Runtime Performance

• پروفایل کردن عملکرد زمان اجرا Profiling Runtime Performance

• دسته‌بندی به‌روزرسانی‌های DOM با قطعات سند Batching DOM Updates with Document Fragments

• دسته‌بندی به‌روزرسانی‌های DOM با قطعات سند Batching DOM Updates with Document Fragments

• گره های بسیار زیاد Too Many Nodes

• گره های بسیار زیاد Too Many Nodes

پروفایل Pixel Pipeline Profiling the Pixel Pipeline

انیمیشن با استفاده از تغییرات DOM Animation Using DOM Changes

• حذف گره ها از DOM Removing Nodes from the DOM

• حذف گره ها از DOM Removing Nodes from the DOM

• قاب های انیمیشن The Animation Frames

• قاب های انیمیشن The Animation Frames

• روش متحرک سازی ما Our Animate Method

• روش متحرک سازی ما Our Animate Method

• انیمیشن کاری ما! Our Working Animation!

• انیمیشن کاری ما! Our Working Animation!

• توقف انیمیشن Stopping the Animation

• توقف انیمیشن Stopping the Animation

انیمیشن با استفاده از تغییرات DOM Animation Using DOM Changes

برنامه ریزی تغییرات DOM با یک مدل حالت Planning DOM Changes with a State Model

• بیایید سطح را بسازیم! Let's Build the Level!

• بیایید سطح را بسازیم! Let's Build the Level!

• 2. مدل ایالتی ما برای کنترل DOM از ایالت. 2. Our State Model to Control the DOM from State.

• 2. مدل ایالتی ما برای کنترل DOM از ایالت. 2. Our State Model to Control the DOM from State.

• عادی سازی ویژگی ها Normalizing Attributes

• عادی سازی ویژگی ها Normalizing Attributes

• کلاس سطح ما Our Level Class

• کلاس سطح ما Our Level Class

• آرایه ها، مراجع، و شکاف های خالی غیر قابل تکرار Arrays, References, and Non-Iterable Empty Slots

• آرایه ها، مراجع، و شکاف های خالی غیر قابل تکرار Arrays, References, and Non-Iterable Empty Slots

• ساختن ایالت ما با یک نفر زشت Building Our State with an Ugly Oneliner

• ساختن ایالت ما با یک نفر زشت Building Our State with an Ugly Oneliner

• برای انسان ها کد بنویسید و کد خود را عادی کنید Write Code for Humans and Normalize Your Code

• برای انسان ها کد بنویسید و کد خود را عادی کنید Write Code for Humans and Normalize Your Code

• رندر کردن عنصر سطح Rendering the Level Element

• رندر کردن عنصر سطح Rendering the Level Element

• هوم، اوضاع به هم ریخته است Hmm, Things are Getting Messy

• هوم، اوضاع به هم ریخته است Hmm, Things are Getting Messy

برنامه ریزی تغییرات DOM با یک مدل حالت Planning DOM Changes with a State Model

بسته بندی آسان Easy Bundling

• بسته بندی آسان Easy Bundling

• بسته بندی آسان Easy Bundling

• بسته با اسکریپت شروع Bundle with the Start Script

• بسته با اسکریپت شروع Bundle with the Start Script

• سرور توسعه دهنده ما Our Dev Server

• سرور توسعه دهنده ما Our Dev Server

• بیایید از ماژول های DOMContentLoaded و ES (ESM) استفاده کنیم Let's Use DOMContentLoaded and ES Modules (ESM)

• بیایید از ماژول های DOMContentLoaded و ES (ESM) استفاده کنیم Let's Use DOMContentLoaded and ES Modules (ESM)

• عناصر سبک پویا با CSS به عنوان واردات ESM Dynamic Style Elements with CSS as ESM Imports

• عناصر سبک پویا با CSS به عنوان واردات ESM Dynamic Style Elements with CSS as ESM Imports

بسته بندی آسان Easy Bundling

به‌روزرسانی‌های DOM با توسعه پایه دولت محور DOM Updates with Basic State-Driven Development

• طراحی شکل کشور ما Designing the Shape of Our State

• طراحی شکل کشور ما Designing the Shape of Our State

• راه‌اندازی وضعیت ما در آماده‌سازی برای ارائه عناصر DOM Initializing Our State in Preparation to Render DOM Elements

• راه‌اندازی وضعیت ما در آماده‌سازی برای ارائه عناصر DOM Initializing Our State in Preparation to Render DOM Elements

• به روز رسانی های DOM از ایالت DOM Updates from State

• به روز رسانی های DOM از ایالت DOM Updates from State

• به روز رسانی به State در DOM منعکس می شود Updates to State are Reflected in the DOM

• به روز رسانی به State در DOM منعکس می شود Updates to State are Reflected in the DOM

• مدلسازی و رندر کردن دیوارهای چیپ ما Modeling and Rendering Our Chip Walls

• مدلسازی و رندر کردن دیوارهای چیپ ما Modeling and Rendering Our Chip Walls

به‌روزرسانی‌های DOM با توسعه پایه دولت محور DOM Updates with Basic State-Driven Development

بازیکن در حال تعامل با ورودی کاربر The Player Interacting with User Input

• بازیکن - رویکرد فنی The Player - Tech Approach

• بازیکن - رویکرد فنی The Player - Tech Approach

• رندر کردن پخش کننده با DOM Rendering the Player with the DOM

• رندر کردن پخش کننده با DOM Rendering the Player with the DOM

• مدل جعبه و سبک های جهانی Box Model and Global Styles

• مدل جعبه و سبک های جهانی Box Model and Global Styles

• دستکاری سبک های درون خطی با DOM Manipulating Inline Styles with the DOM

• دستکاری سبک های درون خطی با DOM Manipulating Inline Styles with the DOM

• حرکت بازیکن با تغییر وضعیت آن Moving the Player by Changing its State

• حرکت بازیکن با تغییر وضعیت آن Moving the Player by Changing its State

• شنوندگان رویداد صفحه کلید DOM DOM Keyboard Event Listeners

• شنوندگان رویداد صفحه کلید DOM DOM Keyboard Event Listeners

• نقشه برداری و فیلتر کردن داده های رویدادهای DOM Mapping and Filtering DOM Events Data

• نقشه برداری و فیلتر کردن داده های رویدادهای DOM Mapping and Filtering DOM Events Data

• آیا بازیکن می تواند حرکت کند؟ - رویکرد فنی Can the Player Move? - Tech Approach

• آیا بازیکن می تواند حرکت کند؟ - رویکرد فنی Can the Player Move? - Tech Approach

• جلوگیری از همپوشانی عناصر DOM Preventing Overlapping DOM Elements

• جلوگیری از همپوشانی عناصر DOM Preventing Overlapping DOM Elements

• فریم های تعاملی را آماده کنید Prepare Interactive Frames

• فریم های تعاملی را آماده کنید Prepare Interactive Frames

• بازنشانی ClassName و افزودن فریم های تعاملی در رویدادهای DOM Resetting ClassName and Adding Interactive Frames on DOM Events

• بازنشانی ClassName و افزودن فریم های تعاملی در رویدادهای DOM Resetting ClassName and Adding Interactive Frames on DOM Events

• فریم ها را بدون جابجایی عنصر در رویدادهای DOM به روز کنید Update Frames without Moving the Element on DOM Events

• فریم ها را بدون جابجایی عنصر در رویدادهای DOM به روز کنید Update Frames without Moving the Element on DOM Events

بازیکن در حال تعامل با ورودی کاربر The Player Interacting with User Input

DOM تعاملی، دیوارهای شکسته Interactive DOM, Breaking Walls

• افزودن عناصر تصادفی DOM Adding Random DOM Elements

• افزودن عناصر تصادفی DOM Adding Random DOM Elements

• رویدادهای DOM هنگام فشار دادن کلید Space DOM Events When Pressing the Space Key

• رویدادهای DOM هنگام فشار دادن کلید Space DOM Events When Pressing the Space Key

• ایجاد عناصر در رویدادهای DOM Creating Elements on DOM Events

• ایجاد عناصر در رویدادهای DOM Creating Elements on DOM Events

• مانیفست Z-Index Z-Index Manifest

• مانیفست Z-Index Z-Index Manifest

• شناسه عناصر پویا با DOM Dynamic Element IDs with the DOM

• شناسه عناصر پویا با DOM Dynamic Element IDs with the DOM

• تعامل با سایر عناصر با استفاده از مدل حالت Interacting with Other Elements Using the State Model

• تعامل با سایر عناصر با استفاده از مدل حالت Interacting with Other Elements Using the State Model

• دیوارهای اطراف را بردارید Remove Surrounding Walls

• دیوارهای اطراف را بردارید Remove Surrounding Walls

DOM تعاملی، دیوارهای شکسته Interactive DOM, Breaking Walls

پورتال خروج از بازی Portal to Exit the Game

• افزودن پورتال به صفحه Adding the Portal to the Screen

• افزودن پورتال به صفحه Adding the Portal to the Screen

• عناصر تصادفی روی صفحه Random Elements on the Screen

• عناصر تصادفی روی صفحه Random Elements on the Screen

• گروه بندی به روز رسانی های درون خطی CSS DOM Grouping Inline CSS DOM Updates

• گروه بندی به روز رسانی های درون خطی CSS DOM Grouping Inline CSS DOM Updates

• خروج از بازی وقتی دو عنصر از مسیرها عبور می کنند Exiting the Game When Two Elements Cross Paths

• خروج از بازی وقتی دو عنصر از مسیرها عبور می کنند Exiting the Game When Two Elements Cross Paths

• چالش: نوبت شما برای ساختن صفحه خروجی است Challenge: Your Turn to Build the Exit Screen

• چالش: نوبت شما برای ساختن صفحه خروجی است Challenge: Your Turn to Build the Exit Screen

• راه حل چالش: نوبت من برای ساختن صفحه خروج Challenge Solution: My Turn to build the Exit Screen

• راه حل چالش: نوبت من برای ساختن صفحه خروج Challenge Solution: My Turn to build the Exit Screen

• پنهان کردن پورتال پشت دیوار Hiding the Portal Behind a Wall

• پنهان کردن پورتال پشت دیوار Hiding the Portal Behind a Wall

• حذف شنوندگان رویداد DOM Removing DOM Event Listeners

• حذف شنوندگان رویداد DOM Removing DOM Event Listeners

پورتال خروج از بازی Portal to Exit the Game

متحرک کردن همه چیز Animating All the Things

• رندر کردن Splash Screen Rendering the Splash Screen

• رندر کردن Splash Screen Rendering the Splash Screen

• تعویض صفحه نمایش Swapping Screens

• تعویض صفحه نمایش Swapping Screens

• متحرک سازی پورتال Animating the Portal

• متحرک سازی پورتال Animating the Portal

• کیت CSS – انیمیشن ها CSS Kit – Animations

• کیت CSS – انیمیشن ها CSS Kit – Animations

• درخواست قاب انیمیشن و تاخیر در انیمیشن Request Animation Frame and Delaying Animations

• درخواست قاب انیمیشن و تاخیر در انیمیشن Request Animation Frame and Delaying Animations

• متحرک سازی با کلاس CSS والدین Animating with a Parent CSS Class

• متحرک سازی با کلاس CSS والدین Animating with a Parent CSS Class

• جلوه تلویزیون قدیمی Old TV Effect

• جلوه تلویزیون قدیمی Old TV Effect

• متحرک سازی با انیمیشن تاخیری Animating with Delayed Animation

• متحرک سازی با انیمیشن تاخیری Animating with Delayed Animation

• بهینه سازی فریم ها Optimizing Frames

• بهینه سازی فریم ها Optimizing Frames

• بهینه سازی فریم نهایی Final Frame Optimizations

• بهینه سازی فریم نهایی Final Frame Optimizations

متحرک کردن همه چیز Animating All the Things

جلوه های صوتی DOM DOM Sound Effects

• عناصر صوتی پویا Dynamic Audio Elements

• عناصر صوتی پویا Dynamic Audio Elements

• جلوه های صوتی تعاملی با رویدادهای DOM Interactive Sound Effects with DOM Events

• جلوه های صوتی تعاملی با رویدادهای DOM Interactive Sound Effects with DOM Events

• جلوه های صوتی تاخیری با تماس و رویدادهای DOM Delayed Audio Effects with Callbacks and DOM Events

• جلوه های صوتی تاخیری با تماس و رویدادهای DOM Delayed Audio Effects with Callbacks and DOM Events

• سخنرانی پایانی، جلوه صوتی نهایی! خروج از بازی Final Lecture, Final Sound Effect! Exiting the Game

• سخنرانی پایانی، جلوه صوتی نهایی! خروج از بازی Final Lecture, Final Sound Effect! Exiting the Game

جلوه های صوتی DOM DOM Sound Effects